<template>
  <view>

    <view class="mask" @tap="hideright" catchtouchmove="true" v-if="popShow == true"></view>

    <!-- 点击筛选弹出的右侧弹出窗口 -->
    <view :class="popShow == true ? 'right_popup':'hide_popup'" catchtouchmove="true">
      <scroll-view class="pop_scroll">
        <view class="searchPopup">
          <view class="up-searcbox">
            <view class="search-header">
              <view class="items">
                <text class="til">车牌号：</text>
                <input type="text" style="margin-left:-16rpx;" v-model="queryParam.carBrand" placeholder="请输入车牌号" />
              </view>
              <view class="items">
                <text class="til">产品：</text>
                <input type="text" style="margin-left:-16rpx;" v-model="queryParam.proName" placeholder="请输入煤种" />
                <!-- <uni-data-select class="net-selct-box" v-model="queryParam.proId"  :multiple="true" :localdata="coaltypeDatas" @change="changeCoaltype" :clear="true"
												 placeholder="请选择煤种"></uni-data-select> -->
              </view>
              <view class="items">
                <text class="til">状态：</text>
                <uni-data-select class="net-selct-box" v-model="queryParam.status" :multiple="true"
                  :localdata="stateList" :clear="true" placeholder="请选择状态"></uni-data-select>
              </view>
              <view class="items">
                <text class="til">司机身份证号：</text>
                <input type="text" style="margin-left:-16rpx;" v-model="queryParam.carCard" placeholder="请输入司机身份证号"
                  maxlength="18" />
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="bottom_btn">
        <view class="reset bottom_btnView" style="background: rgba(64,158,254,0.1);color:#409EFE;" @tap="onreset">重置
        </view>
        <view class="enter bottom_btnView" style="background: #409EFE;color:#fff;" @tap="onenter">查询</view>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    mixins: [{
      methods: {
        setData: function (obj, callback) {
          let that = this;
          const handleData = (tepData, tepKey, afterKey) => {
            tepKey = tepKey.split('.');
            tepKey.forEach(item => {
              if (tepData[item] === null || tepData[item] === undefined) {
                let reg = /^[0-9]+$/;
                tepData[item] = reg.test(afterKey) ? [] : {};
                tepData = tepData[item];
              } else {
                tepData = tepData[item];
              }
            });
            return tepData;
          };
          const isFn = function (value) {
            return typeof value == 'function' || false;
          };
          Object.keys(obj).forEach(function (key) {
            let val = obj[key];
            key = key.replace(/\]/g, '').replace(/\[/g, '.');
            let front, after;
            let index_after = key.lastIndexOf('.');
            if (index_after != -1) {
              after = key.slice(index_after + 1);
              front = handleData(that, key.slice(0, index_after), after);
            } else {
              after = key;
              front = that;
            }
            if (front.$data && front.$data[after] === undefined) {
              Object.defineProperty(front, after, {
                get() {
                  return front.$data[after];
                },
                set(newValue) {
                  front.$data[after] = newValue;
                  that.$forceUpdate();
                },
                enumerable: true,
                configurable: true
              });
              front[after] = val;
            } else {
              that.$set(front, after, val);
            }
          });
          isFn(callback) && this.$nextTick(callback);
        }
      }
    }],
    data() {
      return {
        queryParam: {
          carBrand: undefined,
          carCard: undefined,
          proId: undefined,
          proName: undefined,
          status: 0,
          userId: undefined,
          current: 1,
          pageSize: 10
        },

        proId: null,
        paramDict: {
          minPrice: '',
          maxPrice: ''
        }
      }
    },
    props: {
      // 是否单选
      isSingleSel: {
        type: Boolean
      },
      types: {
        type: Number
      },
      // 菜单图标
      colors: {
        type: String,
        default: '#fa436a',
      },
      // 是否显示
      popShow: {
        type: Boolean,
        default: false,
      },
      // 分类数组
      classList: {
        type: Array
      },
      coaltypeDatas: {
        type: Array
      },
      stateList: {
        type: Array
      },
    },
    methods: {
      changeCoaltype(e) {
        this.coaltypeDatas.forEach(item => {
          if (item.value == e) this.queryParam.proName = item.text
        })
      },
      hideright() {
        this.$emit("hideClick");
      },

      onreset() { //重置筛选条件
        this.queryParam.carBrand = ''
        this.queryParam.status = ''
        this.queryParam.proName = ''
        this.queryParam.carCard = ''
        this.proId = null
      },
      onenter() { //确认筛选条件
        console.log('选中的项123===', this.queryParam)
        this.$emit("sureClick", this.queryParam)
      },
    }
  }
</script>

<style scoped>
  .mask {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 800;
  }

  /* 右侧弹出框 */
  .right_popup {
    width: 100%;
    height: 500px;
    position: absolute;
    bottom: 0;
    background-color: #fff;
    z-index: 920;
    transition: all 0.3s;
  }

  .hide_popup {
    transition: all 0.3s;
    width: 85%;
    height: 100%;
    position: fixed;
    right: -100%;
    top: 0;
    z-index: 920;
    transition: all 0.3s;
    background-color: #fff;
  }

  .pop_scroll {
    /* #ifndef H5 */
    height: calc(90% - 128upx);
    margin-top: 10upx;
    /* #endif */
    /* #ifdef H5 */
    height: calc(90% - 128upx);
    margin-top: 10upx;
    /* #endif */
  }

  .top_price {
    height: 60upx;
    line-height: 60upx;
    display: flex;
    padding: 0 30upx;
  }

  .top_priceText {
    flex: 1;
    text-align: left !important;
    font-size: 28upx;
    font-weight: bold;
    color: #333;
  }

  .input_box {
    padding: 0 30upx;
    height: 60upx;
    line-height: 60upx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30upx;
  }

  .input_boxText {
    color: #999;
  }

  .input_boxInput {
    flex: 1;
    max-width: 45%;
    height: 100%;
    background-color: #F7F7F7;
    border-radius: 40upx;
    box-sizing: border-box;
    text-align: center;
    font-size: 24upx;
  }

  .allClass {
    margin-top: 50upx;
    padding: 0 30upx;
  }

  .allClass .classtext {
    font-size: 28upx;
    font-weight: bold;
    color: #333;
  }

  .allClass .class_box {
    margin-top: 30upx;
    overflow: hidden;
  }

  .class_box .class_tag {
    margin-top: 10px;
    height: 60upx;
    line-height: 60upx;
    padding: 0 20upx;
    font-size: 26upx;
    color: #333;
    border: 1upx solid #999;
    text-align: center;
    border-radius: 10upx;
    float: left;
    margin-right: 20upx;
  }

  .bottom_btn {
    height: 84rpx;
    position: absolute;
    bottom: 0;
    width: 560rpx;
    display: flex;
    justify-content: center;
    font-size: 15px;
  }

  .bottom_btnView {
    width: 280rpx;
    height: 84rpx;
    line-height: 84rpx;
    background-color: #FA436A;
    text-align: center;
    border-raius: 36upx;
    color: #fff;
  }
</style>